<template>
  <div class="guide">

    <!-- 倒计时 结束跳转main页面 -->
    <div class="dao" @click="gotopage('main')">
      <van-circle
        v-model="currentRate"
        color="#f50"
        :rate="rate"
        :speed="speed"
        :text="text"
        :size="120"
      />
    </div>

    <!--vant插件 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(l, i) in imgs" :key='i'>
        <van-image :src="l" class="gimg"></van-image>
        <!-- 进入主页 -->
        <van-button type="primary" @click=" gotopage('main') " class="gbtn" v-if="i==imgs.length-1">进入首页</van-button>
      </van-swipe-item>
    </van-swipe>

  </div>
</template>

<script>
import { getWeek } from '@/utils'

export default {
  // 局部混入
  mixins: [],
  data() {
    return {
      imgs: [
        require('@/assets/3.jpeg'),
        require('@/assets/4.jpg'),
        require('@/assets/5.jpeg'),
        require('@/assets/6.jpeg')
      ],
      currentRate: 0,
      rate: 100,
      speed: 20,
    }
  },
  computed: {
    text() { // 计算倒计时 并显示
      return this.rate / this.speed - parseInt(this.currentRate / this.speed) + 'S'
    }
  },
  watch: {
    currentRate(v) {
      if(v == 100) {
        this.gotopage('main')
      }
    }
  },
  mounted() {
    // 每周只显示三次 超过三次不再显示该页面 直接进入main页面
    // localStorage
    const week = getWeek()
    console.log(week)

    if(localStorage.week) {
      if(localStorage.week != week) {
        localStorage.week = week
        localStorage.pagecount = 0
      }
    } else {
      // 第一次
      localStorage.week = week;
    }

    if(localStorage.pagecount) {
      localStorage.pagecount++
      if(localStorage.pagecount > 3) {
        this.gotopage('main')
      }
    } else {
      // 第一次访问
      localStorage.pagecount = 1
    }
  }
}
</script>

<style lang="scss">

 .guide {
   .dao {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 666;
    ::v-deep .van-circle__text { // 在写了scoped的情况下 需加上::v-deep 防止样式穿透
      color: black !important;
    }
  }
   .my-swipe {
     width: 100%;
     height: 100%;
     .gimg {
       width: 100%;
       height: 100%;
     }
     .gbtn {
       position: absolute;
       bottom: 40px;
       left: 50%;
       transform: translate(-50%);
     }
   }
 }

</style>